<template>
    <div class="head-bar clearfix">
        <BackgroundBox></BackgroundBox>
        <div class="container">
            <div class="menu-icon fl" @click="showMenu"><i class="iconfont icon-menu"></i></div>
            <div class="m-nav">
                <div class="nav-btn"><router-link to="/recommend">推荐</router-link></div>
                <div class="nav-btn"><router-link to="/hotlist">热榜</router-link></div>
                <div class="nav-btn"><router-link to="/test">收藏</router-link></div>
            </div>
            <div class="search-icon fr"><i class="iconfont icon-search"></i></div>
        </div>
    </div>
</template>

<script>
import BackgroundBox from '../components/BackgroundBox'
import { clearTimeout } from 'timers';

export default {
    components: {
        BackgroundBox
    },
    methods: {
        showMenu(){
            this.$store.commit("showMenu");
            let t2 = setTimeout(() => {
                this.$store.commit("offSwitchMenu");
            }, 100);
        }
    },
}
</script>

<style lang="scss" scoped>
    .head-bar{
        height: 48px;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        z-index: 1;
        .container{
            padding: 8px;
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba($color: #000000, $alpha: 0.15);
            .menu-icon, .search-icon{
                width: 40px;
                height: 100%;
                text-align: center;
                .iconfont{
                    font-size: 25px;
                    line-height: 32px;
                    color: white;
                }
            }    
            .m-nav{
                display: inline-block;
                width: calc( 100% - 100px );
                height: 100%;
                margin: 0 auto;
                .nav-btn{
                    height: 100%;
                    color: #fff;
                    display: inline-block;
                    vertical-align: top;
                    width: 25%;
                    text-align: center;
                    font-size: 16px;
                    line-height: 32px;
                }
            }
        }

    }
</style>
